<template>
    <a-layout>
      <a-layout-header>
        <div class="logo" />
        <a-menu theme="dark" mode="horizontal" :selectedKeys="['1']" :style="{ lineHeight: '64px' }">
          <a-menu-item key="1">问题录入</a-menu-item>
        </a-menu>
      </a-layout-header>
      <a-layout-content>
        <div class="content">
          <slot name="content"></slot>
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        ErChen ©2022 Just for fun.
      </a-layout-footer>
    </a-layout>
</template>

<script lang="ts">
import { Layout, Menu } from 'ant-design-vue'
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'ASkeleton',
  components: {
    ALayout: Layout,
    ALayoutHeader: Layout.Header,
    ALayoutContent: Layout.Content,
    ALayoutFooter: Layout.Footer,
    AMenu: Menu,
    AMenuItem: Menu.Item
  }
})
</script>

<style scoped>
.content {
  background-color: #fff;
  min-height: 75vh;
  margin: 8px 0 0 0;
  padding: 5px;
}
</style>
